<template>
  <div>
    <h2>订单详情</h2>
    <!-- 表单 -->
    <el-form
      status-icon
      label-width="100px"
      class="demo-ruleForm"
      id="detail_from"
    >
      <el-form-item label="订单号：" prop="orderNo">
        <el-input
          type="text"
          v-model="ruleForm.orderNo"
          class="deatil_input"
        ></el-input>
      </el-form-item>
      <el-form-item label="创建时间：" prop="createTime">
        <el-input
          type="text"
          v-model="ruleForm.createTime"
          class="deatil_input"
        ></el-input>
      </el-form-item>
      <el-form-item label="收件人：" prop="receiverName">
        <el-input
          type="text"
          v-model="ruleForm.receiverName"
          class="deatil_input"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单状态：" prop="statusDesc">
        <el-input
          type="text"
          v-model="ruleForm.statusDesc"
          class="deatil_input"
        ></el-input>
      </el-form-item>
      <el-form-item label="支付方式：" prop="paymentTypeDesc">
        <el-input
          type="text"
          v-model="ruleForm.paymentTypeDesc"
          class="deatil_input"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单金额：" prop="payment">
        <el-input
          type="text"
          v-model="ruleForm.payment"
          class="deatil_input"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tabledata" stripe style="width: 100%" border>
      <el-table-column prop="productImage" label="商品图片" width="300">
      </el-table-column>
      <el-table-column prop="productName" label="商品信息" width="300">
      </el-table-column>
      <el-table-column prop="quantity" label="单价"  width="200"> </el-table-column>
      <el-table-column prop="productId" label="数量" width="250"> </el-table-column>
      <el-table-column prop="totalPrice" label="合计" width="228"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { orderDeatil } from "../request/http";
export default {
  data() {
    return {
      ruleForm: {},
      tabledata: [],
    };
  },
  mounted() {
    this.orderDeatilList();
  },
  methods: {
    async orderDeatilList() {
      const { data: res } = await orderDeatil(`/order/detail.do`, {
        orderNo: this.$route.params.id,
      });
      console.log(res)
      this.ruleForm = res.data; //赋值
      this.tabledata = this.ruleForm.orderItemVoList;
    //   console.log(this.table);
    },
  },
};
</script>

<style lang="scss">
.deatil_input {
  width: 300px;
  // margin: 20px;
}
#detail_from {
  margin: 20px;
  color: black;
  font-weight: 900;
}
</style>